import React, { useState, useEffect } from 'react';
import {
  Button, Space, Table, Tag, Drawer, Cascader,
  DatePicker,
  Form,
  Tree,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  message,
  TreeSelect,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
// import "./Deduct.scss";
// import * as service from "../../../api/Deduct";
import { duty_list,duty_add,duty_bianji,duty_delete } from "../../../api/Duty";
import { SizeType } from 'antd/es/config-provider/SizeContext';

interface Props{
    
}

interface DataType {
  did: number;
    dname: string;
    buMen:string,
    phone: string;
    dnumber: string;
    jobNumber: string;
    dtime: string;
    money: string;
    // Educationi: string;
  }
function Duty(props:Props) {
    
  const { Option } = Select;
  let [form] = Form.useForm() //定义表单
  let [dataType, setDataType] = useState<DataType[]>([]) //定义表格组件状态--数据
  let [flag, setFlag] = useState(true)//自定义一个开关
  let [did, setid] = useState(0)

    //控制抽屉的显示隐藏
    const [open, setOpen] = useState(false);//定义抽屉开关初始值

    // 抽屉关闭时触发 
    const onClose = () => {
      setOpen(false);
      form.setFieldsValue({dname:'',Bumen:'',phone:'',dnumber:'',jobNumber:'',dtime
      :'',money:""})
    }
    //查看列表
    var hergrg = async () => {
        var res = await duty_list()
        console.log(res.data);
        setDataType(res.data.data)
      }
      useEffect(() => {
        hergrg()
      }, [])
    
      const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          // dataIndex: 'name',
          key: '1',
          width: '120px',
          render: (_, record) => <a>{dataType.indexOf(record) + 1}</a>,
        },
        {
          title: '姓名',
          // dataIndex: 'age',
          key: 'dname',
          width: '120px',
          render: (_, record) => <div>{record.dname}</div>
        },
        {
          title: '部门',
          // dataIndex: 'address',
          key: 'buMen',
          width: '150px',
          render: (_, record) => <div>{record.buMen}</div>
        },
        {
          title: '手机号码',
          // dataIndex: 'address',
          key: 'phone',
          width: '150px',
          render: (_, record) => <div>{record.phone}</div>
        },
        {
          title: '工号',
          // dataIndex: 'address',
          key: 'dnumber',
          width: '170px',
          // text-aligin:center,
          render: (_, record) => <div>{record.dnumber}</div>
    
        },
        {
          title: '证件号',
          // dataIndex: 'address',
          key: 'jobNumber',
          width: '130px',
          render: (_, record) => <div>{record.jobNumber}</div>
    
        },
        {
          title: '薪资',
          // dataIndex: 'address',
          key: 'money',
          width: '150px',
          render: (_, record) => <div>{record.money}</div>
    
        },
        {
          title: '入职日期',
          // dataIndex: 'address',
          key: 'dtime',
          width: '200px',
          render: (_, record) => <div>{record.dtime}</div>
    
        },
        {
          title: '操作',
          key: 'tags',
          dataIndex: 'tags',
          render: (_, record) => {
            return <>
              <Button onClick={()=>{ edit(record)}}>编辑</Button>
              <Button onClick={()=>{detel(record.did)}} >删除</Button>
            </>
          }
        },
      ];
    
      const  onFinish =async(value:any)=>{
          if(flag){
              let res=await duty_add(value)
              console.log(res);
              hergrg()
              setOpen(false)
              message.success({content:'新增成功'})
          }else{
            let jiegouzhi={did,...value}
            let res=await duty_bianji(jiegouzhi)
            console.log(res);
            hergrg()
            setOpen(false)
            message.success({content:'编辑成功'})
            
          }
      }
      let detel=async(did:number)=>{
        let res=await duty_delete({did})
            hergrg()
            message.success({content:'删除成功'})
      }
    const onFinishFailed=(errorInfo: any) => {
      console.log(errorInfo)
      // 新增增加按钮
     
    }
    let newAdd= async()=>{
      setOpen(true)
      setFlag(true)
    }
    //编辑数据
    var edit=(item: any) => {
      console.log(item)
      setOpen(true)
      setFlag(false)
      let { did, ...newarr } = item
      setid(did)
      form.setFieldsValue(newarr)
    }
      return (
        <div className='box'>
          <div className='texts'>
            <p style={{ color: '#000', fontWeight:"700",fontSize:"20px" }}>累计应纳税所得额
</p>
          </div>
          <div className='buton'>
            <span>
              <Button type="primary" onClick={()=>{newAdd()}}>增加</Button>
            </span>
            <span>
    
            </span>
          </div>
          <div>
            <Table columns={columns} dataSource={dataType} />
          </div>
          <>
            <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
              <Form
                form={form}
                // name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 400 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item label="姓名"
                  name="dname">
                  <Input />
                </Form.Item>
    
                <Form.Item
                  label="部门"
                  name="buMen">
                  <Input />
                </Form.Item>
    
                <Form.Item label="手机号码"
                  name="phone">
                  <Input />
                </Form.Item>
                <Form.Item label="证件号"
                  name="jobNumber">
                  <Input />
                </Form.Item>
                <Form.Item label="工号"
                  name="dnumber">
                  <Input />
                </Form.Item>
                <Form.Item label="薪资	"
                  name="money">
                  <Input />
                </Form.Item>
                <Form.Item label="入职日期	"
                  name="dtime">
                  <Input />
                </Form.Item>
                
    
                <Form.Item label="更新列表">
                  <Button type="primary" htmlType="submit">更新</Button>
                </Form.Item>
              </Form>
            </Drawer>
          </>
    
    
    
        </div>
      );
    
    }
  

export default Duty;